<template>
  <div class="container">
    <div class="content-img">
       <img :src="book.imgurl" />
      <!-- 3.这里实现图片放大镜的功能 -->
<!--      <pic-zoom :url="book.imgurl"  :scale="3" :scroll="true" width="100%" height="100%"></pic-zoom>-->
    </div>
    <div class="item-content">
      <div class="book-info">
        <div class="bname">
          <h2>{{book.name}}</h2>
        </div>
        <div class="category">
              <span>
                分类:
                <span class="name">{{book.category}}</span>
              </span>
        </div>
        <div class="detail-book-desc">
          <h3>{{book.desc}}</h3>
        </div>
        <div class="detail-book-price">
          <p>胡椒价</p>
          <!-- <a href="#" style="display:inline">降价通知</a> -->
          <span class="seckill-price text-danger">
                <!-- <Icon type="logo-yen"></Icon> -->
                ￥{{book.price}}
              </span>
        </div>
      </div>
      <div class="book-detail-buy">
        <div class="book-detail-computer">
          <!-- <Computer></Computer> -->
          <br />
          <span>
                每账户最多买
                <em style="color:red">9</em>件
              </span>
        </div>
        <el-button icon="el-icon-shopping-cart-1" type="success" @click="addShopCart">加入购物车</el-button>
        <el-button type="danger" plain @click="toBuy">立即购买</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import api from "../api";
export default {
  name:'BookDetails',
  data(){
    return{
      book:{}
    }
  },
  methods:{
    toBuy(){
      this.$store.dispatch('addGoods',this.book);//该方法能被浏览器的f12捕获
      this.$router.push('/order');
    },
    addShopCart(){
      console.log(this.$store.state.book)
      // this.$store.commit('addGoods',this.book);这种方法浏览器f12不能捕获这个方法
      this.$store.dispatch('addGoods',this.book);//该方法能被浏览器的f12捕获
      this.$router.push('/cart');
    }
  },
  mounted(){
    this.book=this.$store.state.book;
  }
}
</script>
<style scoped>

.container {
  /* padding-top:50px ; */
  margin-left: 20%;
  margin-top: 20px;
  margin-top: 50px;
  height: 600px;
  display: flex;
}
.seckill-item {
  display: flex;
}
.item-content {
  margin-left: 20px;
  width: 700px;
}
.bname {
  font-size: 20px;
  color: black;
}
/* 装图片的容器 */
.content-img {
  width: 320px;
  height: 320px;
}
.content-img img {
  height: 100%;
  width: 100%;
}
.category .name {
  color: blue;
}
.detail-book-desc {
  margin: 10px auto;
  color: black;
  font-family: Microsoft Yahei;
}
.detail-book-price {
  padding-top: 25px;
  margin-bottom: 10px;
  height: 150px;
  background-color: #fcfaf7;
}
.detail-book-price span:nth-child(2) {
  color: red;
  font-size: 25px;
}
.detail-book-price p {
  margin-left: 8px;
  color: gray;
  font-size: 15px;
}
.book-detail-buy {
  margin-top: 40px;
}
.book-detail-computer {
  margin-bottom: 10px;
}
.book-detail-computer span {
  margin-top: 5px;
}
</style>